<!--
 * @Author: H.
 * @Date: 2021-09-15 19:27:27
 * @LastEditTime: 2021-11-24 17:22:38
 * @Description: 
-->
<template>
  <div>
    <h1>Layout 布局示例</h1>
    <Demo :component="RowDemo1" />
    <Demo :component="RowDemo5" />
    <Demo :component="RowDemo2" />
    <Demo :component="RowDemo3" />
    <Demo :component="RowDemo4" />
    <h2>Row Attributes</h2>
    <Table :dataSource="dataSource" :columns="columns" />
    <h2 style="margin-top: 30px">Col Attributes</h2>
    <Table :dataSource="dataSource1" :columns="columns" />
  </div>
</template>

<script lang="ts">
import RowDemo1 from './Demo/RowDemo1.vue'
import RowDemo2 from './Demo/RowDemo2.vue'
import RowDemo3 from './Demo/RowDemo3.vue'
import RowDemo4 from './Demo/RowDemo4.vue'
import RowDemo5 from './Demo/RowDemo5.vue'
import Demo from './Demo/index.vue'
import Table from '../lib/table/Table.vue'
export default {
  setup(props) {
    const dataSource = [
      {
        id: 1,
        params: 'gutter',
        illustrate: '栅格间隔',
        type: 'number',
        optional: '-',
        defaults: '0',
      },
      {
        id: 2,
        params: 'align',
        illustrate: 'flex 布局下的垂直排列方式',
        type: 'string',
        optional: 'left/right/center',
        defaults: '-',
      },
    ]
    const dataSource1 = [
      {
        id: 1,
        params: 'span',
        illustrate: '栅格占据的列数	',
        type: 'number/string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 2,
        params: 'offset',
        illustrate: '栅格左侧的间隔格数		',
        type: 'number/string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 3,
        params: 'ipad',
        illustrate: 'ipad尺寸 栅格属性对象',
        type: 'object (例如： {span: 4, offset: 4})',
        optional: '-',
        defaults: '-',
      },
      {
        id: 4,
        params: 'narrowPc',
        illustrate: '窄屏pc尺寸 栅格属性对象',
        type: 'object (例如： {span: 4, offset: 4})',
        optional: '-',
        defaults: '-',
      },
      {
        id: 5,
        params: 'pc',
        illustrate: '普通pc尺寸 栅格属性对象',
        type: 'object (例如： {span: 4, offset: 4})',
        optional: '-',
        defaults: '-',
      },
      {
        id: 6,
        params: 'widePc',
        illustrate: '宽屏pc尺寸 栅格属性对象',
        type: 'object (例如： {span: 4, offset: 4})',
        optional: '-',
        defaults: '-',
      },
    ]
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '200' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return {
      RowDemo1,
      RowDemo2,
      RowDemo3,
      RowDemo4,
      RowDemo5,
      columns,
      dataSource,
      dataSource1,
    }
  },
  components: {
    Demo,
    RowDemo1,
    RowDemo2,
    RowDemo3,
    RowDemo4,
    RowDemo5,
    Table,
  },
}
</script>

<style></style>
